<!DOCTYPE html>
<html lang="en">

<head>
    <title>My BCIT Project</title>
    <meta name="comp2800 template" content="My 2800 App">

    <!------------------------>
    <!-- Required meta tags -->
    <!------------------------>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!------------------------------------------>
    <!-- Bootstrap Library CSS JS CDN go here -->
    <!------------------------------------------>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

    <!-------------------------------------------------------->
    <!-- Firebase 8 Library related CSS, JS, JQuery go here -->
    <!-------------------------------------------------------->
    <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>

    <!-------------------------------------------->
    <!-- Other libraries and styles of your own -->
    <!-------------------------------------------->
    <!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> -->
    <!-- <link rel="stylesheet" href="./styles/style.css"> -->

</head>

<body>
  <nav id="navbarPlaceholder"></nav>
    <div class="container py-3">
        <header>
            
      
          <div class="pricing-header p-3 pb-md-4 mx-auto text-center">
            <h1 class="display-4 fw-normal text-body-emphasis">Health plan</h1>
            <p class="fs-5 text-body-secondary">The diet should focus on balanced nutrition and have a reasonable combination of three meals. The exercise covers aerobic and strength training. Ensuring adequate sleep in daily routines helps maintain a healthier body and mind.</p>
          </div>
        </header>
      
        <main>
          <div class="row row-cols-1 row-cols-md-3 mb-3 text-center">
            <div class="col">
              <div class="card mb-4 rounded-3 shadow-sm border border-success-subtle">
                <div class="card-header py-3 border-success-subtle" style="background-color: #198754;">
                  <h4 class="my-0 fw-normal text-light">Physical condition</h4>
                </div>
                <div class="card-body">
                  <h1 class="card-title pricing-card-title">Health<small class="text-body-secondary fw-light"></small></h1>
                  <ul class="list-unstyled mt-3 mb-4">
                    <li>Height</li>
                    <li>Body weight</li>
                    <li>Three dimensions</li>
                    <li>BML</li>
                  </ul>
                  <button type="button" class="w-100 btn btn-lg btn-outline-success"><a href="profile.html" style="text-decoration: none;">Add data</a></button>
                </div>
              </div>
            </div>
            <div class="col">
              <div class="card mb-4 rounded-3 shadow-sm border border-success-subtle">
                <div class="card-header py-3 border-success-subtle" style="background-color: #198754;">
                  <h4 class="my-0 fw-normal text-light">Exercise and health</h4>
                </div>
                <div class="card-body">
                  <h1 class="card-title pricing-card-title">Sports<small class="text-body-secondary fw-light"></small></h1>
                  <ul class="list-unstyled mt-3 mb-4">
                    <li>Outdoor running</li>
                    <li>Outdoor cycling</li>
                    <li>Indoor running</li>
                    <li>Spinning bike</li>
                  </ul>
                  <button type="button" class="w-100 btn btn-lg btn-outline-success">
                    <a href="Times.html" style="text-decoration: none;">Sports record</a>
                  </button>
                </div>
              </div>
            </div>
            <div class="col">
              <div class="card mb-4 rounded-3 shadow-sm border border-success-subtle">
                <div class="card-header py-3 border-success-subtle" style="background-color: #198754;">
                  <h4 class="my-0 fw-normal text-light">Control diet</h4>
                </div>
                <div class="card-body">
                  <h1 class="card-title pricing-card-title">Plan<small class="text-body-secondary fw-light"></small></h1>
                  <ul class="list-unstyled mt-3 mb-4">
                    <li>Staple food category</li>
                    <li>Vegetables</li>
                    <li>Fruits</li>
                    <li>Sugar and oil mixed type</li>
                  </ul>
                  <button type="button" class="w-100 btn btn-lg btn-outline-success">
                    <a href="history.html" style="text-decoration: none;">Intake record</a> 
                  </button>
                </div>
              </div>
            </div>
          </div>
      
        </main>
      </div>
    <!-- our own footer goes here-->
    <nav id="footerPlaceholder"></nav>

    <!---------------------------------------------->
    <!-- Your own JavaScript functions go here    -->
    <!---------------------------------------------->
    <script src="./scripts/skeleton.js"></script>
    <script src="./scripts/script.js"></script>

</body>

</html>
